<template>
  <view class="avatar-image">
    <image class="image"
      :style="{ width: `${width}rpx`, height: `${width}rpx`, borderWidth: `${borderWidth}rpx`, borderColor: borderColor }"
      :src="url ? url == 'def-avatar.png' ? '/static/def-avatar.png' : getImgUrl(url) : '/static/default-avatar.png'" mode="aspectFill"></image>
  </view>
</template>

<script>
  import { ImgUrlPrefix } from '@/utils/util.js'
  export default {

    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
      url: {
        type: String,
        default: ''
      },
      width: {
        type: Number,
        default: 90
      },
      borderWidth: {
        type: Number,
        default: 0
      },
      borderColor: {
        type: String,
        default: '#000000'
      }
    },

    data() {
      return {

      }
    },

    methods: {
		// 图片地址拼接
		getImgUrl(val) {
			if (val.startsWith('images/')) {
			  const url = ImgUrlPrefix(val)
			  return url
			} else {
			  return val
			}
		},
    }
  }
</script>

<style lang="scss" scoped>
  .avatar-image {
    .image {
      display: block;
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      border-style: solid;
    }
  }
</style>
